{% extends '::frontend.html.twig' %}

{% block title %} {{usuario.nombres ~ ' ' ~ usuario.apellidos }} {% endblock %}

{% block libreriasJS %}
    <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
    <script>

        $(document).ready(function() {
            $('#resultado').load("{{ path('tabla_partituras') }}", {"busqueda": '{{usuario.username}}', "metodo": "persona"})

        });

    </script>
{% endblock %}

{% block main %}
    <div>
        <div class="container">
            <div class="row">
                <div class="col-xs-6 col-md-4">
                    <img height="200" width="200" src="{{ asset('public/images/caio.jpg') }}" alt="..." class="img-rounded">
                    <hr class="empty">
                    <div class="container">
                        <button class="btn btn-default" href="#">Cambiar Foto</button>
                        <button class="btn btn-default" onclick=location.href="{{ path('usuario_editar_perfil') }}" >Editar perfil</button>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-4">
                    <h1> <p>  {{usuario.nombres }} {{ usuario.apellidos}} </p> </h1>
                    <h2> <p>  {{ usuario.email}} </p> </h2>

                </div>
                <div class="col-xs-12 col-sm-6 col-md-4">
                    <div class="panel"> <h3>Historia</h3>
                        <ul class="list-group">
                            <li class="list-group-item"> <span class="badge">2</span> Partituras Realizadas</li>
                            <li class="list-group-item"> <span class="badge">4</span> Partituras Favoritas </li>
                            <li class="list-group-item"> <span class="badge">1</span> Siguiendo </li>
                            <li class="list-group-item"> <span class="badge">7</span> Seguidores </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <section id="descripcion">
        </section>


        <div id="resultado" style="margin-top: 30px;"></div>


    </div>
{% endblock %}
